<template>
  <uni-icons :type="icontype" :size="size" :color="color"> </uni-icons>
</template>

<script>
export default {
  name: 'fileIcon',
  props: {
    filename: {
      type: String,
      default: '',
    },
    size: {
      type: Number,
      default: 50,
    },
    color: {
      type: String,
      default: '#ccc',
    },
  },
  watch: {
    filename: {
      handler(newVal) {
        const type_1 = ['jpg', 'jpeg', 'png', 'gif']; // 图像
        const type_2 = ['mp3', 'wav', 'ogg', 'amr', 'aac', '3gp']; // 录音
        const type_3 = ['mp4', 'avi', 'mov', 'wmv']; // 视频

        if (!newVal || !newVal.includes('.')) {
          this.icontype = 'info';
        } else {
          const type = newVal.split('.').pop().toLowerCase(); // 确保小写
          console.log('图标类型', type);

          if (type_1.includes(type)) {
            this.icontype = 'image';
          } else if (type_2.includes(type)) {
            this.icontype = 'mic';
          } else if (type_3.includes(type)) {
            this.icontype = 'videocam';
          } else {
            this.icontype = 'info';
          }
        }
      },
      immediate: true, // 立即执行一次以初始化
    },
  },
  data() {
    return {
      icontype: 'info',
    };
  },
};
</script>

<style></style>
